@use '../../util/popup' as popup;

.sx__time-picker-popup {
  @include popup.popup-base;

  display: flex;
  flex-direction: column;
  gap: var(--sx-spacing-padding3);
  background-color: var(--sx-color-background);
  box-sizing: border-box;

  * {
    box-sizing: border-box;
  }

  .is-dark & {
    background-color: var(--sx-color-surface-container-high);
  }

  $top-placement-bottom-value: calc(100% + 1rem);

  &.bottom-end {
    left: auto;
    right: 0;
    transform: translateX(0);
  }

  &.top-start {
    inset: auto auto $top-placement-bottom-value 0;
    transform: translateX(0);
  }

  &.top-end {
    inset: auto 0 $top-placement-bottom-value auto;
    transform: translateX(0);
  }

  .sx__time-picker-popup-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--sx-color-neutral);
    font-family: inherit;

    .is-dark & {
      color: var(--sx-internal-color-text);
    }
  }

  .sx__time-picker-time-inputs {
    display: flex;
    gap: var(--sx-spacing-padding2);

    [dir="rtl"] & {
      flex-direction: row-reverse;
      justify-content: flex-end;
    }
  }

  .sx__time-picker-colon {
    font-size: 2.5rem;
    color: var(--sx-internal-color-text);
    margin: 0 var(--sx-spacing-padding1);
  }

  .sx__time-picker-12-hour-switches {
    display: flex;
    flex-flow: column;
    flex: 1;
    margin-left: var(--sx-spacing-padding1);
  }

  .sx__time-picker-12-hour-switch {
    background-color: transparent;
    padding: 0 var(--sx-spacing-padding3);
    border: none;
    flex: 1;
    cursor: pointer;
    border-radius: inherit;
    color: var(--sx-internal-color-text);

    &:focus {
      outline: 1px solid var(--sx-color-primary);
    }

    &:first-child {
      border: 1px solid var(--sx-color-neutral);
      border-bottom: 1px solid var(--sx-color-neutral);
      border-top-left-radius: var(--sx-rounding-small);
      border-top-right-radius: var(--sx-rounding-small);
    }

    &:last-child {
      border: 1px solid var(--sx-color-neutral);
      border-bottom-left-radius: var(--sx-rounding-small);
      border-bottom-right-radius: var(--sx-rounding-small);
    }

    &.is-selected {
      background-color: var(--sx-color-primary-container);
      color: var(--sx-color-on-primary-container);
    }
  }

  .sx__time-picker-actions {
    display: flex;
    justify-content: end;
    gap: var(--sx-spacing-padding2);
  }

  .sx__time-picker-action {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--sx-color-primary);
    background-color: transparent;
    cursor: pointer;
    border: none;

    &:focus {
      outline: 2px solid var(--sx-color-primary);
      border-radius: var(--sx-rounding-extra-small);
    }
  }
}
